<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Class: JSVideo</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Class: JSVideo</h1>

    




<section>

<header>
    
        <h2>
        JSVideo
        </h2>
        
    
</header>

<article>
    <div class="container-overview">
    
        

    

    <h4 class="name" id="JSVideo"><span class="type-signature"></span>new JSVideo<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    Creates a video player pointing to files specified by the url
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line14">line 14</a>
    </li></ul></dd>
    

    

    

    
</dl>
















    
    </div>

    

    

    

     

    

    

    
        <h3 class="subsection-title">Methods</h3>

        
            

    

    <h4 class="name" id="CreateVideoCanvas"><span class="type-signature"></span>CreateVideoCanvas<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function creates the html elements (display, scroll bar and buttons) for the video player
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line103">line 103</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="DisplayFrame"><span class="type-signature"></span>DisplayFrame<span class="signature">(i)</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function displays the frame at position i, as well as the annotations corresponding to such frame. 
If such frame is not available, it pauses the player, loads a chunk of frames starting from i and replays.
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>i</code></td>
            

            <td class="type">
            
                
<span class="param-type">int</span>


            
            </td>

            

            

            <td class="description last">the index of the frame to be displayed</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line202">line 202</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="GenerateFrames"><span class="type-signature"></span>GenerateFrames<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function generates the html <img> elements that contain the loaded frames
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line190">line 190</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="GoToFrame"><span class="type-signature"></span>GoToFrame<span class="signature">(frame)</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function sets the player to frame 'frame'.
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>frame</code></td>
            

            <td class="type">
            
                
<span class="param-type">int</span>


            
            </td>

            

            

            <td class="description last">the index of the frame of interest</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line275">line 275</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="GoToFrameButtonClicked"><span class="type-signature"></span>GoToFrameButtonClicked<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function is called when the user clicks the Go to frame button. It displays the frame indicated by the text field
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line184">line 184</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="loadChunk"><span class="type-signature"></span>loadChunk<span class="signature">(frame, duration, first_time)</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function loads a set of frames to the player.
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>frame</code></td>
            

            <td class="type">
            
                
<span class="param-type">int</span>


            
            </td>

            

            

            <td class="description last">the first frame to load</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>duration</code></td>
            

            <td class="type">
            
                
<span class="param-type">int</span>


            
            </td>

            

            

            <td class="description last">the duration of the chunk to be loaded</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>first_time</code></td>
            

            <td class="type">
            
                
<span class="param-type">bool</span>


            
            </td>

            

            

            <td class="description last">boolean indicating whether the function is called for the first time</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line439">line 439</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="loadFile"><span class="type-signature"></span>loadFile<span class="signature">(frame, first_time, response)</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function checks that the loaded frames are correct, stores them in the video structure
It prepares the polygon for scaling.
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>frame</code></td>
            

            <td class="type">
            
                
<span class="param-type">int</span>


            
            </td>

            

            

            <td class="description last">the position corresponding to the first frame in the set</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>first_time</code></td>
            

            <td class="type">
            
                
<span class="param-type">bool</span>


            
            </td>

            

            

            <td class="description last">boolean indicating whether it was the first frame load of the video</td>
        </tr>

    

        <tr>
            
                <td class="name"><code>response</code></td>
            

            <td class="type">
            
                
<span class="param-type">json</span>


            
            </td>

            

            

            <td class="description last">json with the set of jpg frames being loaded</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line70">line 70</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="NextFrame"><span class="type-signature"></span>NextFrame<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    Displays the next frame in a video file according to the video rate.
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line332">line 332</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="Play"><span class="type-signature"></span>Play<span class="signature">(buttonClicked)</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function sets the player to play. It can be called when a chunk of needed frames is loaded or when the user hits the play button.
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>buttonClicked</code></td>
            

            <td class="type">
            
                
<span class="param-type">bool</span>


            
            </td>

            

            

            <td class="description last">boolean indicating whether the user clicked the play button or the video was played because the chunks got loaded</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line309">line 309</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="seekChunkToDownload"><span class="type-signature"></span>seekChunkToDownload<span class="signature">(frame)</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function looks for future frames that haven't been loaded yet and loads them into the player.
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>frame</code></td>
            

            <td class="type">
            
                
<span class="param-type">int</span>


            
            </td>

            

            

            <td class="description last">the frame index from which to start seeking</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line430">line 430</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="StepBackward"><span class="type-signature"></span>StepBackward<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function goes to the previous frame.
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line392">line 392</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="StepBeginning"><span class="type-signature"></span>StepBeginning<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function goes to the start of the video.
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line408">line 408</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="StepEnd"><span class="type-signature"></span>StepEnd<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function goes to the end of the video.
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line419">line 419</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="StepForward"><span class="type-signature"></span>StepForward<span class="signature">()</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function forces to go to the next frame, regardless of frame rate.
</div>













<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line376">line 376</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="UpdateLoadbar"><span class="type-signature"></span>UpdateLoadbar<span class="signature">(pos)</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function updates the position of the load bar.
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>pos</code></td>
            

            <td class="type">
            
                
<span class="param-type">float</span>


            
            </td>

            

            

            <td class="description last">float from 0 to 1 indicating the position of the load bar</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line301">line 301</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
            

    

    <h4 class="name" id="UpdateScrollbar"><span class="type-signature"></span>UpdateScrollbar<span class="signature">(pos)</span><span class="type-signature"></span></h4>

    



<div class="description">
    This function updates the position of the scroll bar.
</div>









    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        

        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>pos</code></td>
            

            <td class="type">
            
                
<span class="param-type">float</span>


            
            </td>

            

            

            <td class="description last">float from 0 to 1 indicating the position of the scroll bar</td>
        </tr>

    
    </tbody>
</table>






<dl class="details">

    

    

    

    

    

    

    

    

    

    

    

    

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="player.js.html">player.js</a>, <a href="player.js.html#line292">line 292</a>
    </li></ul></dd>
    

    

    

    
</dl>
















        
    

    

    
</article>

</section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="AdjustEvent.html">AdjustEvent</a></li><li><a href="canvas.html">canvas</a></li><li><a href="file_info.html">file_info</a></li><li><a href="image.html">image</a></li><li><a href="JSVideo.html">JSVideo</a></li><li><a href="video.html">video</a></li></ul><h3>Global</h3><ul><li><a href="global.html#AdjustPolygonButton">AdjustPolygonButton</a></li><li><a href="global.html#CreatePopupBubble">CreatePopupBubble</a></li><li><a href="global.html#CreatePopupBubbleCloseButton">CreatePopupBubbleCloseButton</a></li><li><a href="global.html#DrawCanvasClosePolygon">DrawCanvasClosePolygon</a></li><li><a href="global.html#DrawCanvasMouseDown">DrawCanvasMouseDown</a></li><li><a href="global.html#FinishStartup">FinishStartup</a></li><li><a href="global.html#getQueryVariable">getQueryVariable</a></li><li><a href="global.html#LMgetfield">LMgetfield</a></li><li><a href="global.html#LMnumberOfObjects">LMnumberOfObjects</a></li><li><a href="global.html#LoadAnnotation404">LoadAnnotation404</a></li><li><a href="global.html#LoadAnnotationSuccess">LoadAnnotationSuccess</a></li><li><a href="global.html#LoadTemplate404">LoadTemplate404</a></li><li><a href="global.html#LoadTemplateSuccess">LoadTemplateSuccess</a></li><li><a href="global.html#oVP">oVP</a></li><li><a href="global.html#SetAllAnnotationsArray">SetAllAnnotationsArray</a></li><li><a href="global.html#StartDrawEvent">StartDrawEvent</a></li><li><a href="global.html#StartEditEvent">StartEditEvent</a></li><li><a href="global.html#StartEditVideoEvent">StartEditVideoEvent</a></li><li><a href="global.html#StartupLabelMe">StartupLabelMe</a></li><li><a href="global.html#StopDrawEvent">StopDrawEvent</a></li><li><a href="global.html#StopEditEvent">StopEditEvent</a></li><li><a href="global.html#UndoCloseButton">UndoCloseButton</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0-dev</a> on Thu Mar 12 2015 11:35:00 GMT-0700 (PDT)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>